* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 背景样式 */
.bg {
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url("./bg.png");
    background-size: 100% 100%;
    transform-style: preserve-3d;
    /*transform: translateZ(-10000px);*/
}


/* 主星球样式*/

.admin_box {
    height: 160px;
    width: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateX(-50%) translateY(-50%);
    animation: box_rotate 30s linear infinite;
}

.admin_box > div {
    height: 100%;
    width: 100%;
    position: absolute;
    box-shadow: 0 0 60px rgba(255, 88, 0, 0.8);
    background-image: radial-gradient(transparent 70%, rgba(255, 88, 0, 0.8) 100%);
    border: 2px solid rgba(255, 88, 0, 0.8);
    border-radius: 50%;
}


/* 星球 炫酷样式 */
.admin_box > div:nth-of-type(2), .box_1 > div:nth-of-type(2), .box_2 > div:nth-of-type(2), .box_3 > div:nth-of-type(2), .box_4 > div:nth-of-type(2), .box_5 > div:nth-of-type(2) {
    transform: rotateY(90deg);
}

.admin_box > div:nth-of-type(3), .box_1 > div:nth-of-type(3), .box_2 > div:nth-of-type(3), .box_3 > div:nth-of-type(3), .box_4 > div:nth-of-type(3), .box_5 > div:nth-of-type(3) {
    transform: rotateY(45deg);
}

.admin_box > div:nth-of-type(4), .box_1 > div:nth-of-type(4), .box_2 > div:nth-of-type(4), .box_3 > div:nth-of-type(4), .box_4 > div:nth-of-type(4), .box_5 > div:nth-of-type(4) {
    transform: rotateY(135deg);
}

.admin_box > div:nth-of-type(5), .box_1 > div:nth-of-type(5), .box_2 > div:nth-of-type(5), .box_3 > div:nth-of-type(5), .box_4 > div:nth-of-type(5), .box_5 > div:nth-of-type(5) {
    transform: rotateX(90deg);
}

.admin_box > div:nth-of-type(6), .box_1 > div:nth-of-type(6), .box_2 > div:nth-of-type(6), .box_3 > div:nth-of-type(6), .box_4 > div:nth-of-type(6), .box_5 > div:nth-of-type(6) {
    transform: rotateX(45deg);
}

.admin_box > div:nth-of-type(7), .box_1 > div:nth-of-type(7), .box_2 > div:nth-of-type(7), .box_3 > div:nth-of-type(7), .box_4 > div:nth-of-type(7), .box_5 > div:nth-of-type(7) {
    transform: rotateX(135deg);
}


/* 星轨盒子样式 */
.pathway_box {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0);
    transform-style: preserve-3d;
}
/* 星轨的公共样式 */
.pathway {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotateX(60deg);
    border-radius: 50%;
    border: 1px solid #ededed;
    transform-style: preserve-3d;
}

/*星球的公共样式*/
.box {
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.box_1 > div, .box_2 > div, .box_3 > div, .box_4 > div, .box_5 > div {
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 50%;
}
/* 星轨1 */
 .pathway_1 {
     width: 360px;
     height: 360px;
     animation: pathway_rotate 22s linear infinite;
 }

.pathway_2 {
    width: 560px;
    height: 560px;
    animation: pathway_rotate 18s linear infinite;
}
.pathway_3 {
     width: 760px;
     height: 760px;
     animation: pathway_rotate 30s linear infinite;
 }
.pathway_4 {
    width: 960px;
    height: 960px;
    animation: pathway_rotate 28s linear infinite;
}
.pathway_5 {
    width: 1160px;
    height: 1160px;
    animation: pathway_rotate 15s linear infinite;
}

 /* 星球1样式 */
.box_1 {
    width: 60px;
    height: 60px;
    animation: box_rotate 20s linear infinite;
}



.box_1 > div {
    box-shadow: 0 0 40px rgba(100, 211, 10, 0.8);
    background-image: radial-gradient(transparent 70%, rgba(100, 211, 10, 0.8) 100%);
    border: 2px solid rgba(100, 211, 10, 0.8);
}
/* 星球2的样式*/
.box_2 {
    width: 80px;
    height: 80px;
    animation: box_rotate 23s linear infinite;
}
.box_2 > div {
    box-shadow: 0 0 40px rgba(160, 100, 200, 0.8);
    background-image: radial-gradient(transparent 70%, rgba(160, 100, 200, 0.8) 100%);
    border: 2px solid rgba(160, 100, 200, 0.8);

}
/* 星球3的样式*/
.box_3 {
    width: 20px;
    height: 20px;
    animation: box_rotate 60s linear infinite;
}
.box_3 > div {
    box-shadow: 0 0 30px rgba(160, 200, 200, 0.8);
    background-image: radial-gradient(transparent 70%, rgba(160, 200, 200, 0.8) 100%);
    border: 2px solid rgba(160, 200, 200, 0.8);

}
/* 星球4的样式*/
.box_4 {
    width: 30px;
    height: 30px;
    animation: box_rotate 22s linear infinite;
}
.box_4 > div {
    box-shadow: 0 0 40px rgba(20, 153, 241, 0.5);
    background-image: radial-gradient(transparent 70%, rgba(20, 153, 241, 0.5) 100%);
    border: 2px solid rgba(20, 153, 241, 0.5);

}
/* 星球2的样式*/
.box_5 {
    width: 88px;
    height: 88px;
    animation: box_rotate 30s linear infinite;
}
.box_5 > div {
    box-shadow: 0 0 50px rgba(233, 221, 58, 0.76);
    background-image: radial-gradient(transparent 70%, rgba(233, 221, 58, 0.76) 100%);
    border: 2px solid rgba(233, 221, 58, 0.76);

}
/*星球自传动画*/
@keyframes box_rotate {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateX(0) rotateY(0) rotateZ(0);
    }
    20% {
        transform: translateX(-50%) translateY(-50%) rotateX(40deg) rotateY(80deg) rotateZ(20deg);
    }
    40% {
        transform: translateX(-50%) translateY(-50%) rotateX(180deg) rotateY(140deg) rotateZ(120deg);
    }
    60% {
        transform: translateX(-50%) translateY(-50%) rotateX(100deg) rotateY(200deg) rotateZ(180deg);
    }
    80% {
        transform: translateX(-50%) translateY(-50%) rotateX(80deg) rotateY(100deg) rotateZ(100deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotateX(0) rotateY(0) rotateZ(0);
    }
}

@keyframes pathway_rotate {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateX(60deg) rotateZ(0);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotateX(60deg) rotateZ(360deg);
    }
}


